// 拖拽手柄相关变量
:root {
  // 拖拽手柄尺寸
  --drag-handle-gap: 8px;
  --drag-handle-size: 20px;
  --drag-handle-gutter-width: 56px;
  --drag-handle-border-radius: 6px;
  --drag-handle-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --drag-handle-bg: rgba(255, 255, 255, 0.9);
  --drag-handle-blur: blur(4px);
  
  // 过渡动画
  --drag-handle-transition: all 0.2s ease-in-out;

   /* 主题色 */
   --editor-primary-color: #3480f9;
   --editor-color-white: #fff;
   --editor-color-black: #000;
   
   /* 警示颜色 */
   --editor-warning-color: #f6913e;
   --editor-error-color: #ef3f35;
   
   /* 背景颜色 */
   --editor-container-background: #f4f5f7;
   --editor-button-hover-background: #f2f2f2;
   --editor-button-active-background: #f2f2f2;
   
   /* 文本选中时的背景颜色 */
   --editor-text-selection-background: #94cfff;
 
   /* 字体相关 */
  --editor-font-family: 
    microsoft yahei, helvetica neue, helvetica, pingfang sc, hiragino sans gb,
    simsun, sans-serif;
   --editor-font-size: 14px;
   --editor-font-size-small: 12px;
   --editor-text-color: rgb(51, 54, 57);
   --editor-text-color-light: rgba(0, 0, 0, 0.5);
   --editor-text-color-disabled: #a7abac;
 
   /* 边框 */
   --editor-shadow: 
     0 3px 14px 2px rgba(0, 0, 0, 0.03), 
     0 8px 10px 1px rgba(0, 0, 0, 4%),
     0 5px 5px -3px rgba(0, 0, 0, 8%);
   --editor-border-color: rgba(0, 0, 0, 0.08);
   --editor-border-color-dark: #ddd;
   --editor-border-color-light: rgba(0, 0, 0, 0.08);
   
   /* 分割线 */
   --editor-divider-color: var(--editor-border-color);
 
   /* 圆角 */
   --editor-radius: 3px;
   --editor-radius-medium: 5px;
 
   /* 弹出层 */
   --editor-tooltip-content-padding: 6px 10px;
 
   /* 编辑器 */
   --editor-content-text-color: #333;
   --editor-content-node-radius: var(--editor-radius);
   --editor-content-node-selected-background: #f5f8fc;
   --editor-content-table-border-color: #333;
   --editor-content-table-thead-background: #f1f3f5;
   --editor-content-code-color: var(--editor-primary-color);
   --editor-content-code-background: #f1f3f5;
   --editor-content-code-family: 
     Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 
   /* 页面相关 */
   --editor-page-background: #fff;
   --editor-page-margin-top: 2.54cm;
   --editor-page-margin-bottom: 2.54cm;
   --editor-page-margin-left: 3.18cm;
   --editor-page-margin-right: 3.18cm;
 
   /* 滚动条 */
   --editor-scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
   --editor-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.35);

   /* Dropdown 菜单相关 */
   --dropdown-menu-width: 180px;
   --dropdown-menu-padding: 8px;
   --dropdown-menu-padding-horizontal: 16px;
   --dropdown-menu-item-gap: 8px;
   --dropdown-menu-border-radius: 8px;
   --dropdown-menu-scrollbar-width: 6px;
   --dropdown-submenu-offset: 12px;
   --dropdown-submenu-margin-top: -8px;
   --dropdown-submenu-arrow-space: 25px;
   --dropdown-divider-margin: 6px;
   --dropdown-arrow-size: 10px;

   /* Select 下拉项相关 */
   --toolbar-select-dropdown-min-width: 200px;

   /* Toolbar 模式切换动画相关 */
   --toolbar-mode-transition-duration-enter: 0.35s;
   --toolbar-mode-transition-duration-leave: 0.25s;
   --toolbar-mode-transition-timing-enter: cubic-bezier(0.25, 0.8, 0.25, 1);
   --toolbar-mode-transition-timing-leave: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   --toolbar-mode-transform-distance: 8px;
   --toolbar-mode-scale-min: 0.98;
   --toolbar-mode-blur: 2px;

   /* 批注相关颜色 */
   --comment-panel-background: var(--editor-color-white);
   --comment-item-background: #fafafa;
   --comment-item-background-active: var(--editor-color-white);
   --comment-item-border-color: transparent;
   --comment-item-border-color-active: var(--editor-primary-color);
   --comment-item-hover-background: rgba(0, 0, 0, 0.02);
   --comment-reply-background: rgba(0, 0, 0, 0.02);
   --comment-reply-hover-background: rgba(0, 0, 0, 0.02);
   --comment-border-color: #e5e7eb;
   --comment-divider-color: #e5e7eb;
   --comment-quote-background: #f5f5f5;
   --comment-quote-text-color: #666;
   --comment-time-color: #999;
   --comment-resolved-bg: #e8f5e9;
   --comment-resolved-color: #4caf50;
   --comment-mention-bg: #ffffff;
   --comment-mention-border: #e5e7eb;
   --comment-mention-header-bg: #f8f9fa;
   --comment-mention-item-hover-bg: #f5f7fa;
   --comment-mention-item-active-bg: #eef2f6;
   --comment-mention-divider: #f0f0f0;
   --comment-mention-text-color: #666;
   --comment-highlight-bg-start: rgba(24, 144, 255, 0.1);
   --comment-highlight-bg-end: rgba(24, 144, 255, 0.05);
   --comment-highlight-shadow: rgba(24, 144, 255, 0.15);

   /* Tabs 标签页相关 */
   --tabs-container-padding: 0 8px;
   --tabs-container-background: var(--editor-color-white);
   --tabs-container-border-color: var(--editor-border-color);
   --tabs-container-border-bottom-width: 1px;
   
   /* Tabs 项相关 */
   --tabs-item-font-size: 13px;
   --tabs-item-font-weight: 400;
   --tabs-item-font-weight-active: 500;
   --tabs-item-color: var(--editor-text-color);
   --tabs-item-color-hover: var(--editor-text-color);
   --tabs-item-color-active: var(--editor-primary-color);
   --tabs-item-color-disabled: var(--editor-text-color-disabled);
   --tabs-item-background: transparent;
   --tabs-item-background-hover: transparent;
   --tabs-item-background-active: transparent;
   --tabs-item-background-disabled: transparent;
   --tabs-item-border-bottom-width: 2px;
   --tabs-item-border-bottom-color-active: var(--editor-primary-color);
   --tabs-item-transition: all 0.2s;
   --tabs-item-disabled-opacity: 0.5;
   
   /* Tabs underline 变体 */
   --tabs-underline-item-padding: 8px 16px 10px;
   --tabs-underline-item-padding-small: 4px 12px 6px;
   --tabs-underline-item-padding-large: 10px 20px 12px;
   --tabs-underline-item-margin-bottom: -1px;
   
   /* Tabs pills 变体 */
   --tabs-pills-gap: 4px;
   --tabs-pills-item-padding: 6px 12px;
   --tabs-pills-item-padding-small: 4px 10px;
   --tabs-pills-item-padding-large: 8px 16px;
   --tabs-pills-item-border-radius: 6px;
   --tabs-pills-item-background-hover: #f3f4f6;
   --tabs-pills-item-background-active: var(--editor-primary-color);
   --tabs-pills-item-color-active: var(--editor-color-white);
   
   /* Tabs 尺寸 */
   --tabs-item-font-size-small: 12px;
   --tabs-item-font-size-large: 14px;
   
   /* Tabs 响应式 */
   --tabs-container-padding-md: 0 6px;
   --tabs-container-padding-sm: 0 4px;
   --tabs-underline-item-padding-md: 6px 12px 8px;
   --tabs-underline-item-padding-sm: 5px 10px 7px;

   /* 分段控制器相关 */
   --segmented-control-height: 32px;
   --segmented-control-padding: 2px;
   --segmented-control-background: #f0f0f0;
   --segmented-control-border-radius: 6px;
   --segmented-control-item-padding: 0 12px;
   --segmented-control-item-font-size: 14px;
   --segmented-control-item-color: var(--editor-text-color);
   --segmented-control-item-color-active: #ffffff;
   --segmented-control-item-background-active: var(--editor-primary-color);
   --segmented-control-item-transition: all 0.2s ease;
   --segmented-control-item-disabled-opacity: 0.5;
   --segmented-control-item-disabled-cursor: not-allowed;

  /* 兼容 editor.scss 所用变量别名（映射到上面的标准变量） */
  /* editor 内容相关变量（供 editor.scss 直接使用） */
  --editor-content-line-number-color: var(--editor-text-color-light);
  --editor-content-node-bottom: 8px;
  --editor-content-table-selected-background: rgba(52, 128, 249, 0.12);
  --editor-content-invisible-break-color: rgba(0, 0, 0, 0.35);
  --editor-content-search-result-background: rgba(52, 128, 249, 0.2);
  --editor-content-search-result-current-background: rgba(52, 128, 249, 0.35);
  --editor-content-node-border: var(--editor-border-color);

 }
 
 /* 暗色主题 */
 [theme-mode='dark'] {
   /* 主题色 */
   --editor-color-white: #17171a;
   --editor-color-black: #fff;
 
   /* 警示颜色 */
   --editor-warning-color: rgb(207, 110, 45);
   --editor-error-color: rgb(198, 71, 81);
 
   /* 背景颜色 */
   --editor-container-background: #2a2b2d;
   --editor-button-hover-background: #3a3a3c;
   --editor-button-active-background: #3a3a3c;
 
   /* 字体相关 */
   --editor-text-color: #ddd;
   --editor-text-color-light: #bbb;
   --editor-text-color-disabled: #999;
 
   /* 边框 */
   --editor-border-color: rgba(255, 255, 255, 0.15);
   --editor-border-color-dark: rgba(255, 255, 255, 0.2);
   --editor-border-color-light: rgba(255, 255, 255, 0.6);
 
   /* 编辑器 */
   --editor-content-text-color: #000;
   --editor-page-background: #1a1a1a;
 
   /* 滚动条 */
   --editor-scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
   --editor-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.45);
  
   /* 编辑器内容 */
   --editor-content-node-selected-background: rgba(255, 255, 255, 0.08);
   
   /* Dropdown 菜单在暗色主题下保持不变 */
   /* 尺寸相关变量不需要改变，仅样式相关的变量会继承编辑器主题变量 */
   
   /* Tabs 在暗色主题下的调整 */
   /* 大部分 tabs 变量会通过编辑器基础变量自动适配（如 color、border-color 等） */
   /* 只需要覆盖硬编码的值 */
   --tabs-pills-item-background-hover: rgba(255, 255, 255, 0.08);
   
   /* Tabs underline 变体在暗色主题下的额外调整 */
   --tabs-item-color-hover: var(--editor-text-color-light);
   
   /* 分段控制器在暗色主题下的调整 */
   --segmented-control-background: rgba(255, 255, 255, 0.08);
   --segmented-control-item-color: var(--editor-text-color);
   --segmented-control-item-color-active: var(--editor-color-black);
   
   /* 批注相关颜色 - 暗色主题 */
   --comment-panel-background: var(--editor-color-white);
   --comment-item-background: rgba(255, 255, 255, 0.05);
   --comment-item-background-active: rgba(255, 255, 255, 0.08);
   --comment-item-border-color: transparent;
   --comment-item-border-color-active: var(--editor-primary-color);
   --comment-item-hover-background: rgba(255, 255, 255, 0.08);
   --comment-reply-background: rgba(255, 255, 255, 0.03);
   --comment-reply-hover-background: rgba(255, 255, 255, 0.05);
   --comment-border-color: rgba(255, 255, 255, 0.15);
   --comment-divider-color: rgba(255, 255, 255, 0.15);
   --comment-quote-background: rgba(255, 255, 255, 0.08);
   --comment-quote-text-color: var(--editor-text-color-light);
   --comment-time-color: var(--editor-text-color-light);
   --comment-resolved-bg: rgba(76, 175, 80, 0.2);
   --comment-resolved-color: #66bb6a;
   --comment-mention-bg: var(--editor-color-white);
   --comment-mention-border: rgba(255, 255, 255, 0.15);
   --comment-mention-header-bg: rgba(255, 255, 255, 0.05);
   --comment-mention-item-hover-bg: rgba(255, 255, 255, 0.08);
   --comment-mention-item-active-bg: rgba(255, 255, 255, 0.1);
   --comment-mention-divider: rgba(255, 255, 255, 0.1);
   --comment-mention-text-color: var(--editor-text-color-light);
   --comment-highlight-bg-start: rgba(24, 144, 255, 0.15);
   --comment-highlight-bg-end: rgba(24, 144, 255, 0.08);
   --comment-highlight-shadow: rgba(24, 144, 255, 0.2);
   
}
